<template>
	<view :style="{'--color':color}" v-if="pageShow">
		<status-bar title='论坛'></status-bar>

		<topic :pageData="classifyData"></topic>

		<view class="row bgwhite padding30 a-center" :class="fixed?'fixedBox':''" id="navBox" >
			<block v-for="(item,index) in nav" :key="index">
				<view class="m-right50 p-bot16 p-re" 
				     :class="current == index?'active bold color size34':'color_33 size32'"
					 @click="changeNav(index)">{{item}}</view>
			</block>
		</view>
		
		<lists :pageData="pageData"></lists>
		
		<postBtn></postBtn>	
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import topic from '../components/forum/topic.vue';
	import lists from '../components/forum/list.vue';
	import postBtn from '../components/forum/postBtn.vue';
	export default {
		components: {
			topic,
			lists,
			postBtn
		},
		data() {
			return {
				pageShow:false,
				getMore:true,
				nav: ['全部', '热门'],
				current: 0,
				viewTop:0,
				fixed:false,
				classifyData:[],
				pageindex:1,
				pagecount:10,
				pageData:[]
			}
		},
		onShow() {
			this.getCategory();
			this.user_space_manage();
			this.ViewInfo();
		},
		methods: {
			...mapMutations(['getTopic']),
			
			//  话题
			getCategory(){
				this.$http.get({
					url:'/communityApi/getFilter',
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					if(res.data.isExamine == 1) return this.toUrl(res.data.isExamineRoute);
					this.pageShow = true;
					this.$BarTitle('社区');
					this.classifyData = res.data.class;
					this.getTopic(this.classifyData)
				})
			},
			
			user_space_manage(){
				this.$http.get({
					url:'/communityApi/user_space_manage',
					data:{
						pageindex:this.pageindex,
						pagecount:this.pagecount,
						hot:this.current
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					let dataInfo;
					if (!res.data || !res.data.data) {
						res.data.data = [];
						this.getMore = false;
					}
					if (res.data && res.data.data) dataInfo = res.data.data;
					this.pageindex == 1 ? this.pageData = dataInfo : this.pageData = this.pageData.concat(dataInfo);
				})
			},
			
			changeNav(index){
				this.current = index;
				this.getMore = true;
				this.pageindex = 1;
				this.user_space_manage();
			},
			
			ViewInfo(){
				this.$getViewInfo('#navBox').then(res=>{
					if(res) this.viewTop = res[0].top;
				})
			}
		},
		onPageScroll(e) {
			e.scrollTop > this.viewTop?this.fixed = true:this.fixed = false
		},
		computed: {
			...mapState(['color','vid','share']),
		},
		onReachBottom() {
			if(this.getMore) return;
			this.pageindex++;
			this.user_space_manage();
		},
		onShareAppMessage(res) {
			let share = this.share
			return {
				title: share.title,
				desc: share.desc,
				path:`/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: share.imageUrl
			}
		},
		onShareTimeline(){
			let share = this.share
			return {
				title: share.desc,
				query: {share_v_id: this.vid},
				imageUrl: share.imageUrl
			}
		},
	}
</script>

<style lang="scss" scoped>
	.active::after {
		content: '';
		width:40rpx;
		height: 2px;
		background-color: var(--color);
		position: absolute;
		left:50%;
		bottom: 0;
		transform: translate(-50%,0);
	}
	.fixedBox{
		position: fixed;
		top:0;
		left:0;
		z-index:888;
	}
	
</style>
